<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用标签</title>
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">
    <style>
    div{
        background: paleturquoise;
        width: 1200px;
        height: 50px;
    }
    a{
        background: paleturquoise;
        width: 1200px;
        height: 50px;
    }
    img{
        width: 50px;
        height: 50px;
    }
    form{
        /* 设置表单的字体大小为0，消除空白间隙 */
        font-size: 0px;
    }
    input{
        width: 200px;
        height: 50px;
    }
    button{ 
        width: 50px;
        height: 50px;
    }
    </style>
</head>
<body>
    <!-- 块级元素：再占一行,可以设置宽高 -->
    <div>div元素,无实际意义，用来布局</div>
    <!-- 无序列表 -->
    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>自定义列表头部</dt>
        <dd>自定义列表1</dd>
        <dd>自定义列表2</dd>
        <dd>自定义列表3</dd>
    </dl>
    <!-- 标题标签 -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <!-- 段落 -->
    <p>段落</p>
    <!-- 行内元素：可以一排排列，不能设置宽高 -->
    <a href="https://www.baidu.com/">百度</a>
    <span>文字</span>
    <b>加粗</b>
    <i>斜体</i>
    <!-- 行内块级:可以与行内元素排列在一起，并且可以设置宽高 -->
    <img src="https://www.baidu.com/favicon.ico" alt="">
    <!-- 表单 -->
    <form action="">
        <input type="text">
        <button>确定</button>
    </form>
</body>
</html>